<template>
  <div class="menu-box">
    <el-menu
      router
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
    >
    <div class="expand">
      <el-icon @click="expand"><Expand v-show="isCollapse"/> <Fold v-show="!isCollapse"/></el-icon>
    </div>
      <!-- <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>Navigator One</span>
        </template>
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
        <el-menu-item index="1-3">item three</el-menu-item>
        <el-sub-menu index="1-4">
          <template #title><span>item four</span></template>
          <el-menu-item index="1-4-1">item one</el-menu-item>
        </el-sub-menu>
      </el-sub-menu> -->
      <el-menu-item index="/home">
        <el-icon><OfficeBuilding /></el-icon>
        <template #title>酒店</template>
      </el-menu-item>
      <el-menu-item index="/train">
        <el-icon><Bicycle /></el-icon>
        <template #title>火车</template>
      </el-menu-item>
      <el-menu-item index="/aircraft">
        <el-icon><Van /></el-icon>
        <template #title>飞机</template>
      </el-menu-item>
      <el-menu-item index="/lowCode">
        <el-icon><Van /></el-icon>
        <template #title>问卷设计</template>
      </el-menu-item>
      <el-menu-item index="/questionPage">
        <el-icon><Van /></el-icon>
        <template #title>问卷列表</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  OfficeBuilding,
  Expand,
  Fold,
  Bicycle,
  Van,
} from "@element-plus/icons-vue";

const defaultActive = ref(location.hash.replace('#', ''))
const isCollapse = ref(true);
const expand = () => {
  isCollapse.value = !isCollapse.value;
};
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style scoped lang="scss">
.menu-box {
  width: 100%;
  height: 100%;
  .expand {
    height: 56px;
    line-height: 56px;
    padding-top: 10px;
    // text-align: center;
    padding-left: 25px;
    // border-right: 1px solid #dcdfe6;
    .el-icon {
      cursor: pointer;
      font-size: 18px;
    }
  }
  .el-menu {
    height: 100%;
    width: 200px;
    
  }
  .el-menu--collapse{
      width: calc(var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2);
    }
}
</style>
